<template>
  <div>
    <h2>找回密码</h2>
    <div>
      <label for="account">账号</label>
      <input type="text" id="account" v-model="account">
    </div>
    <div>
      <label for="phone">手机号</label>
      <input type="text" id="phone" v-model="phone">
    </div>
    <div>
      <label for="captcha">验证码</label>
      <input type="text" id="captcha" v-model="captcha">
      <button @click="sendCaptcha" :disabled="disabledSendCaptcha">获取验证码</button>
    </div>
    <button @click="verifyCaptcha">下一步</button>

    <div v-if="showReset">
      <div>
        <label for="password">新密码</label>
        <input type="password" id="password" v-model="password">
      </div>
      <button @click="resetPassword">确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      phone: '',
      captcha: '',
      disabledSendCaptcha: false,
      showReset: false,
      password: ''
    }
  },
  methods: {
    sendCaptcha() {
      // 发送API请求，请求后端发送验证码短信
      // 在收到响应后，禁用发送验证码按钮60秒
      this.disabledSendCaptcha = true;
      setTimeout(() => {
        this.disabledSendCaptcha = false;
      }, 60000);
    },
    verifyCaptcha() {
      // 发送API请求，验证验证码是否正
      // 如果验证码正确，显示密码重设表单
      // 如果验证码不正确，弹出提示框
      this.showReset = true;
    },
    resetPassword() {
// 发送API请求，更新用户的个人信息，包括密码等
// 如果修改成功，跳转至登录页面
// 如果修改失败，弹出提示框
    }
  }
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>